<template>
  <div class="box">
    <transition name="slide-fade">
      <div v-show="loading" class="av-loader-body">
        <div class="av-loader"></div>
      </div>
    </transition>
    <div class="header colWrapper">
      <div class="contain">
        <div class="top row-wrapper">
          <label for="index" @click="goIndex">
            <img id="index" class="logo" src="../assets/images/logo_desktop.svg" alt=""/>
          </label>
          <div class="row-wrapper">
            <span class="menu-text">MENU</span>
            <div class="menu-contain row-wrapper">
              <img class="menu" src="../assets/images/menu.svg" alt="">
            </div>
          </div>
        </div>
        <img class="slide-image" src="../assets/images/slide3_img.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      loading: true
    }
  },
  activated() {
    this.init()
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.loading = true
      let that = this
      setTimeout(() => {
        that.loading = false
      }, 500)
    },
    /**
     * 前往首页
     */
    goIndex() {
      this.init()
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  .menu-text{
    padding: 10px;
  }
  .menu-contain{
    height: 54px;
    border: 2px solid transparent;
    transition: all .5s;
    border-radius: 30px;
    .menu{
      height: 35px;
      padding: 10px;
    }
  }
  .menu-contain:hover{
    border-color: #040404;
    cursor: pointer;
  }
  .av-loader-body {
    background-color: #040404;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 2;
    visibility: visible;
    top: 0;
    left: 0;
    text-align: center;
    justify-content: center;
    align-content: center;
    transition: .5s all
  }

  .av-loader {
    border-color: #f4f4f4;
    border-top-color: #fcd969;
    width: 64px;
    height: 64px;
    border-width: 8px;
    border-style: solid;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    animation: 1s spin infinite linear
  }

  @keyframes spin {
    from {
      transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg)
    }
  }

  .header {
    background-image: linear-gradient(-15deg, transparent 45%, #fcd969 36.05%);

    .contain {
      align-self: center;

      .top {
        height: 147px;
        margin: 0 85px;
        justify-content: space-between;
        .logo {
          height: 56px;
        }

        .logo:hover {
          cursor: pointer;
        }
      }
    }
  }
}

.row-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.colWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>